<template>
    <div class="todo-footer">
        <label>
            <input type="checkbox" v-model="flag" @change="changeAll" />
        </label>
        <span>
            <span>已完成{{js.finshCount}}</span> / 全部{{js.count}}
        </span>
        <button class="btn btn-danger" @click="clear">清除已完成任务</button>
    </div>
</template>
<script>
export default {
    props: {
        
    },
    data() {
        return {
            infoList:[],
            flag:false //全选按钮的状态
        };
    },
    mounted() {
       this.$BUS.$on('footerData',(data)=>{
           this.$BUS.$on('footerData',(data)=>{
               this.infoList = data
           })
           //同步全选状态
            this.flag = data.every(item=>item.status)
       }) 
    },
    methods: {
        //全选
        changeAll(){
            this.$BUS.$emit('changeAllStatus',this.flag)
        },
        clear(){
            this.$BUS.$emit('clearAll')
        }
    },
    computed:{
        js(){
            //已完成任务，总任务
            let count = this.infoList.reduce( (prev,item,index)=>{
                //已完成
                if(item.status){ prev.finshCount += 1}
                prev.count += 1
                return prev 
                //定义默认值
            },{ finshCount:0,count:0})
            return count
        }
    }
};
</script>

<style scoped>
/*footer*/
.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}

.todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}

.todo-footer button {
    float: right;
    margin-top: 5px;
}
</style>
